<script setup lang="ts">
import { ref, computed } from 'vue';

const text = ref('');
const keyword = ref('');

const processedText = computed(() => {
	if (!text.value || !keyword.value) {
		return text.value;
	}

	// 使用字符串替换方法删除所有匹配的关键字
	return text.value.replace(new RegExp(escapeRegExp(keyword.value), 'g'), '');
});

// 转义正则表达式特殊字符
function escapeRegExp(string: string): string {
	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

const copyToClipboard = async () => {
	await navigator.clipboard.writeText(processedText.value);
};
</script>

<template>
	<c-card>
		<div space-y-4>
			<!-- 原始文本输入 -->
			<div>
				<c-label>原始文本</c-label>
				<c-input-text
					v-model:value="text"
					multiline
					placeholder="请输入要处理的文本..."
					rows="6" />
			</div>

			<!-- 关键字输入 -->
			<div>
				<c-label>要删除的关键字</c-label>
				<c-input-text
					v-model:value="keyword"
					placeholder="请输入要删除的关键字..." />
			</div>

			<!-- 处理结果 -->
			<div>
				<div flex items-center justify-between mb-2>
					<c-label>处理结果</c-label>
					<c-button
						v-if="processedText"
						size="small"
						@click="copyToClipboard">
						复制结果
					</c-button>
				</div>
				<c-input-text
					:value="processedText"
					multiline
					readonly
					placeholder="处理后的文本将显示在这里..."
					rows="6" />
			</div>

			<!-- 统计信息 -->
			<div v-if="text && keyword" flex gap-4>
				<n-statistic label="原始字符数" :value="text.length" />
				<n-statistic
					label="删除的字符数"
					:value="text.length - processedText.length" />
				<n-statistic label="结果字符数" :value="processedText.length" />
			</div>
		</div>
	</c-card>
</template> 